<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Real time drawing App</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
<canvas id="paper" width="1900" height="1000">
  Your browser needs to support canvas for this to work!
</canvas>

<!-- JavaScript includes. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script src="//cdn.jsdelivr.net/sockjs/1.0.0/sockjs.min.js"></script>
<script src="//cdn.rawgit.com/vert-x3/vertx-bus-bower/master/vertx-eventbus.js"></script>

<script>

  $(function () {
    // This demo depends on the canvas element
    if (!('getContext' in document.createElement('canvas'))) {
      alert('Sorry, it looks like your browser does not support canvas!');
      return false;
    }
    var doc = $(document),
      canvas = $('#paper'),
      ctx = canvas[0].getContext('2d');
    // Generate an unique ID
    var id = Math.round($.now() * Math.random());
    // A flag for drawing activity
    var drawing = false;
    var clients = {};
    // create a event bus bridge to the server that served this file
    //var eb = new EventBus('http://apsrt1451:5555/eventbus');
    var eb = new EventBus('http://localhost:5555/eventbus');
    eb.onopen = function () {
      // listen to draw events
      eb.registerHandler('draw', function (err, res) {
        // Is the user drawing?
        var data = res.body;
        if (data.drawing && clients[data.id]) {
          // Draw a line on the canvas. clients[data.id] holds
          // the previous position of this user's mouse pointer
          drawLine(clients[data.id].x, clients[data.id].y, data.x, data.y);
        }
        // Saving the current client state
        clients[data.id] = data;
        clients[data.id].updated = $.now();
      });
    };
    var prev = {};
    canvas.on('mousedown', function (e) {
      e.preventDefault();
      drawing = true;
      prev.x = e.pageX;
      prev.y = e.pageY;
    });
    doc.bind('mouseup mouseleave', function () {
      drawing = false;
    });
    var lastEmit = $.now();
    doc.on('mousemove', function (e) {
      if ($.now() - lastEmit > 30) {
        eb.publish('draw', {
          'x': e.pageX,
          'y': e.pageY,
          'drawing': drawing,
          'id': id
        });
        lastEmit = $.now();
      }
      // Draw a line for the current user's movement, as it is
      // not received in the eventbus
      if (drawing) {
        drawLine(prev.x, prev.y, e.pageX, e.pageY);
        prev.x = e.pageX;
        prev.y = e.pageY;
      }
    });
    // Remove inactive clients after 10 seconds of inactivity
    setInterval(function () {
      for (var ident in clients) {
        if (clients.hasOwnProperty(ident)) {
          if ($.now() - clients[ident].updated > 10000) {
            // Last update was more than 10 seconds ago.
            // This user has probably closed the page
            delete clients[ident];
          }
        }
      }
    }, 10000);
    function drawLine(fromx, fromy, tox, toy) {
      ctx.moveTo(fromx, fromy);
      ctx.lineTo(tox, toy);
      ctx.stroke();
    }
  });
</script>

</body>
</html>
